<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>简历</title>
	<meta name="viewport" content="width=device-width" />
	<!-- favicon图标 -->
	<link rel="shortcut icon" href="./static/favicon.png" type="image/x-icon">
	<!-- 51la网站统计 -->
	<script src="./static/js/tongji.js"></script>
	<link rel="stylesheet" href="./static/css/bootstrap-5.2.0.min.css">
	<link rel="stylesheet" href="./static/css/index.css">

</head>

<body>
	<div class="container-fluid">
		<div id="app" class="container mt-md-5">
			<header class="p-5 text-center">
				<div class="row text-center ">
					<h1 class="py-5">RESUMES</h1>
				</div>
				<div class="row head-info justify-content-around">

					<div class="col-lg-auto col-sm-6">
						电话：<a :href="'tel:'+datas.phone">{{datas.phone}}</a>
					</div>
					<div class="col-lg-auto col-sm-6">
						微信：<span id="wechat">{{datas.wechat}}</span>
						<button type="button" class="btn btn-success rounded-pill btn-sm" id="copyBT">
							微信交谈
						</button>
					</div>
					<div class="col-lg-auto col-sm-6">
						QQ：{{datas.qq}}<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=9066225&site=qq&menu=yes"><img
								border="0" src="http://wpa.qq.com/pa?p=2:9066225:51" alt="点击这里给我发消息" title="点击这里给我发消息" /></a>
					</div>
					<div class="col-lg-auto col-sm-6">
						<a :href="'mailto:'+datas.email" rel="nofollow">邮箱：{{datas.email}}</a>
						<a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=VjQzNzozPxYnJ3g1OTs"
							style="text-decoration:none;">
							<img src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png" />
						</a>
					</div>
				</div>
			</header>

			<!-- 中间部分 -->
			<main>
				<!-- 在这里加个判断才不会vue报错 -->
				<div class="row px-5 text-center" v-if="!!datas.datas">
					<div id="a1" class="col-xl col-lg-3 col-md-4 col-sm-6 col-12 py-5">
						<div class="module">
							<p>{{datas.datas.a1.title}}</p>
							<a :href="item.path" v-for="(item, index) in datas.datas.a1.res" :key="index">{{item.name}}</a>
						</div>

					</div>
					<div id="a2" class="col-xl col-lg-3 col-md-4 col-sm-6 col-12 py-5">
						<div class="module">
							<p>{{datas.datas.a2.title}}</p>
							<a :href="item.path" v-for="(item, index) in datas.datas.a2.res" :key="index">{{item.name}}</a>
						</div>
					</div>
					<div id="a3" class="col-xl col-lg-3 col-md-4 col-sm-6 col-12 py-5">
						<div class="module">
							<p>{{datas.datas.a3.title}}</p>
							<a :href="item.path" v-for="(item, index) in datas.datas.a3.res" :key="index">{{item.name}}</a>
						</div>
					</div>
					<div id="a4" class="col-xl col-lg-3 col-md-4 col-sm-6 col-12 py-5">
						<div class="module">
							<p>{{datas.datas.a4.title}}</p>
							<a :href="item.path" v-for="(item, index) in datas.datas.a4.res" :key="index">{{item.name}}</a>
						</div>
					</div>
					<div id="a5" class="col-xl col-lg-3 col-md-4 col-sm-6 col-12 py-5">
						<div class="module">
							<p>{{datas.datas.a5.title}}</p>
							<a :href="item.path" v-for="(item, index) in datas.datas.a5.res" :key="index">{{item.name}}</a>
						</div>
					</div>
					<div id="a6" class="col-xl col-lg-3 col-md-4 col-sm-6 col-12 py-5">
						<div class="module">
							<p>{{datas.datas.a6.title}}</p>
							<a :href="item.path" v-for="(item, index) in datas.datas.a6.res" :key="index">{{item.name}}</a>
						</div>
					</div>
				</div>







			</main>
			<!-- 底部 -->
			<footer class="text-center py-3">Copyright&copy;2022 &nbsp;<a href="//bealei.com">bealei</a>&nbsp; 版权所有.
			</footer>
		</div>


	</div>
</body>

<script src="./static/js/jquery-3.2.1.min.js"></script>
<script src="./static/js/vue-2.6.12.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->

<script>
	// ------------ vue ------------
	Vue.config.productionTip = true; //阻止 vue 在启动时生成生产提示。
	new Vue({
		el: '#app',
		data() {
			return {
				datas: [],
				color: [
					'text-success',
					'text-danger',
					'text-warning',
					'text-info',
					'text-primary'
				],
			};
		},
		mounted() {
			// ------------ copy ------------
			function copyArticle(event) {
				console.log('1111')
				const range = document.createRange();
				range.selectNode(document.getElementById('wechat'));
				const selection = window.getSelection();
				if (selection.rangeCount > 0) selection.removeAllRanges();
				selection.addRange(range);
				document.execCommand('copy');
				alert("微信号复制成功！");
				console.log('6666')
			}
			document.getElementById('copyBT').addEventListener('click', copyArticle, false);


			// ------------ JSON 接收 ------------

			// 这里一定要使用常量 const来引用this，不然可能会出现this指向问题
			const that = this;
			// 使用getjson读取数据;
			$.getJSON('./static/data.json', function (data) {
				// 将读取到的json数据赋值给rows
				that.datas = data.content;
				console.log('请求到的数据：', data);
			});


			// ------------ 方法结束 ------------
		},
	});
</script>

</html>